<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>离线路径规划</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://127.0.0.1:8099/route/lib/js/paper-full.js"></script>
    <link rel="stylesheet" href="http://127.0.0.1:8099/route/lib/leaflet/leaflet.css" />
    <script src="http://127.0.0.1:8099/route/lib/jquery/jquery-3.3.1.js"></script>
    <script src="http://127.0.0.1:8099/route/lib/leaflet/leaflet.js"></script>
    <script src="http://127.0.0.1:8099/route/lib/leaflet/leaflet.contextmenu.js"></script>
    <script src="http://127.0.0.1:8099/route/lib/js/smooth.js"></script>
<!--    <script type="text/javascript" src="http://127.0.0.1:8099/route/lib/js/main.js"></script>-->
    <link rel="stylesheet" href="http://127.0.0.1:8099/route/lib/leaflet/leaflet.contextmenu.min.css"/>
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1:8099/route/src/style.css"/>
    <link rel="stylesheet" href="http://127.0.0.1:8099/route/src/L.Control.Heightgraph.css?v=0.2.0" />
    <link rel="stylesheet" href="http://127.0.0.1:8099/route/src/flatpickr.min.css?v=4.4.6">

</head>

<style>
    * { margin: 0; padding: 0; }
    html, body { height: 100%; }
    #map { width:100%; height:100%; }
</style>

<body>
       <div id="map" ></div>
</body>
<script>

    var map = L.map('map', {
        center: [34.76,113.65],
        zoom: 13,
        crs: L.CRS.EPSG3857,
        layers: [
            L.tileLayer('http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7', {
            })
        ],
        contextmenu: true,
        contextmenuItems: [{
            text: '设置为起点',
            icon:'http://127.0.0.1:8099/route/lib/img/start.png',
            callback: setStartPoint
        },  {
            text: '设置为中间点',
            icon:'http://127.0.0.1:8099/route/lib/img/way.png',
            callback: setWaypoints
        }, '-', {
            text: '设置为终点',
            icon:'http://127.0.0.1:8099/route/lib/img/end.png',
            callback: setStopPoint
        }, {
            text: '开始规划',
            callback: _buildRouteUrl
        }]
    });
    var _startPoint,_stopPoint,_wayPoints=[];
    var _points = [];//用于存储所有点
    function setStartPoint(event){
        _startPoint = event.latlng;
        var _icon = L.icon({
            iconUrl:'http://127.0.0.1:8099/route/lib/img/start.png',
            iconSize:[30,30],
            iconAnchor:[15,15]
        })
        new L.marker(_startPoint,{icon:_icon}).addTo(map);
    }
    function setWaypoints(event){
        _wayPoints.push(event.latlng);
        var _icon = L.icon({
            iconUrl:'http://127.0.0.1:8099/route/lib/img/way.png',
            iconSize:[30,30],
            iconAnchor:[15,15]
        })
        L.marker(event.latlng,{icon:_icon}).addTo(map);
    }
    function setStopPoint(event){
        _stopPoint = event.latlng;
        var _icon = L.icon({
            iconUrl:'http://127.0.0.1:8099/route/lib/img/end.png',
            iconSize:[30,30],
            iconAnchor:[15,15]})
        new L.marker(_stopPoint,{icon:_icon}).addTo(map);
    }
    function _buildRouteUrl(newNode, offset){
        var wayPoints = _setPointsSequence();
        if(wayPoints === null || wayPoints === undefined){
            return;
        }else{
            const list = [];
            $.each(wayPoints,function (i,v){
                list.push('{lat:'+wayPoints[i].lat + ',lon:' + wayPoints[i].lng+'}');
            })
            var jp=JSON.stringify(list);
            $.ajax({
                url:"http://127.0.0.1:8099/route/route/plan",
                contentType :"application/json",
                type:"POST",
                data:jp,
                success:function (result) {
                    if (result.gpx === undefined){
                        alert(result.msg);
                    }else{
                        console.log(result.gpx)
                        const latlngs=$.each(result.gpx,function (i,v) {
                            return L.latLng(v.lat,v.lng);
                        })
                        new L.Polyline(latlngs,{
                            color: "#2D8F26",
                            // pulseColor:"#F7F9F6",
                            delay:1200
                        }).addTo(map);
                        console.log(result.time);
                        console.log(result.path);
                    }
                    // return result;
                }
            })
        }
    }
    function _setPointsSequence(){
        var me = this;
        if(this._startPoint == null || this._startPoint === undefined){
            alert("请先设置起点");
            return;
        }
        if(this._stopPoint == null || this._stopPoint === undefined){
            alert("请先设置终点");
            return;
        }
        this._points.push(this._startPoint);
        if(this._wayPoints.length > 0){
            for(let i=0;i<me._wayPoints.length;i++){
                me._points.push(me._wayPoints[i]);
            }
        }
        this._points.push(this._stopPoint);
        return this._points;
    }

</script>
</html>
